import React, { Component } from "react";

// 函数组件可以直接接受形参props
// props的值是不能改变的，react也是单向数据流
const Child1 = ({ msg }) => {
  // console.log(props);
  return <div>child1组件 - {msg}</div>;
};

class Child2 extends Component {
  render() {
    console.log(this);
    return <div>child2组件 - {this.props.count}</div>;
  }
  // 是生命周期，相当于mounted
  // componentDidMount() {
  //   this.props.count = 20;
  // }
}

class App extends Component {
  render() {
    return (
      <>
        <h2>props</h2>
        {/* 父传子传递内容，依旧使用自定义属性 */}
        <Child1 msg="hello" />
        <Child2 count="10" />
      </>
    );
  }
}

export default App;
